<template>
  <div class="header">    
    <div class="flex items-center">
      <button class="button-back" @click="$router.back()">
        <svg-icon style="color: white; font-size: 24px; margin-right: 20px;" icon-class="ArrowLeftBold" />            
      </button>
      <span class="text-white text-xl">{{ props.title }}</span>          
    </div> 
  </div>
</template>

<script setup lang="ts">
const props = defineProps(['title'])
</script>

<style lang="scss" scoped>
.header {
  background-image: url('../design/assets/pass-design-header-bg.jpg');
  height: 250px;
  padding: 40px 20px;   
  
  .button-back {
    height: 24px;
    width: 24px;
    margin-right: 20px;
  }
}
</style>
